<template>
	<view class="chatBox">
		<view class="chatCont" >
			<block  v-for="(item,index) in chatArr" >
				<view class="left" v-if="item.indeti != 0">
					<view class="reciverCon">
						<image src="../../static/logo.png" mode="widthFix" class="reciverImg"></image>
						<view class="reciverText">
							{{item.content}} 
						</view>
					</view>
				</view>
				<view class="right" v-else>
					<view class="reciverCon">
						<view class="reciverText">
							{{item.content}} 
						</view>
						<image src="../../static/logo.png" mode="widthFix" class="reciverImg"></image>
					</view>
				</view>
			</block>
		</view>
		<view class="chatBtn">
			<view>语音</view>
			<input type="text" v-model="contVal"  confirm-type="go"
						@confirm="comfirmCon" @focus="keyboardheightchange" placeholder="请输入内容" class="contInp" />
			<view>表情</view>
			<view>其他</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				contVal:"",
				chatArr:[
					{ 
						indeti:1,
						content:"没有啊"
					},
					
				]
			};
		},
		  
		methods:{
			comfirmCon(e){
				// console.log(e) 
				let val = e.target.value
				let obj = {}
				obj.indeti = 0
				obj.content = val
				this.chatArr.push(obj)
				this.contVal = ""
				uni.hideKeyboard()
			},
			
		}
		
	}
</script>
  
<style lang="scss" scoped>
.chatBox{
	width: 100%;
	height: 100%;
	padding: 10rpx 0;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 32rpx;
	background-color: #f4f4f4;
		.chatCont{
			width: 94%;
			margin: auto;
			overflow: scroll;
			height:calc(100% - 150rpx); 
			.left{
				margin-bottom: 20rpx;
				.reciverCon{
					display: flex;
					align-content: flex-start;
					.reciverImg{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					.reciverText{
						padding: 20rpx;
						background-color: #FFFFFF; 
						position: relative;
						border-radius: 10rpx;
						max-width: calc(100% - 210rpx);
						&::after{
							content: "";
							position: absolute;
							left: -15rpx;
							top: 6rpx;
							width: 0;
							height: 0;
							border-top: 25rpx solid transparent;
							border-right: 30rpx solid #FFFFFF;
							border-bottom: 25rpx solid transparent;
							
						}
					}
				}
			}
		
			.right{
				margin-bottom: 20rpx;
				display: flex;
				justify-content: flex-end; 
				.reciverCon{
					display: flex;
					align-content: flex-end;
					padding-left: 80rpx;
					.reciverImg{
						min-width: 70rpx;
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-left: 20rpx;
					}
					.reciverText{
						padding: 20rpx;
						background-color: #31cc90; 
						color: #FFFFFF; 
						position: relative;
						border-radius: 10rpx;
					 
						&::after{
							content: "";
							position: absolute;
							right: -15rpx;
							top: 6rpx;
							width: 0;
							height: 0;
							border-top: 25rpx solid transparent;
							border-left: 30rpx solid #31cc90;
							border-bottom: 25rpx solid transparent;
							
						}
					}
				}
			}
		}
		.chatBtn{
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 150rpx;
			width: 100%;
			background-color: #f0f0f0;
			font-size: 28rpx;
			color: #999;
			.contInp{
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 10rpx;
				width: calc(100% - 40%);
			}
		}
}
</style>
